import React, { Fragment, Component } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { actions } from './store'
import styles from './style.css'
import withStyle from '../../withStyle'

class Header extends Component {
  render() {
    const { isLogin, handleLogin, handleLogout } = this.props
    return (
      <div className={styles.container}>
        <Link to="/" className={styles['list-item']}>
          首页
        </Link>
        <Link
          to="/login/login-child"
          className={styles['list-item']}
          style={{ marginLeft: '100px' }}
        >
          LoginChild
        </Link>
        {isLogin ? (
          <Fragment>
            <Link
              to="/translation"
              className={styles['list-item']}
              style={{ marginLeft: '100px' }}
            >
              翻译列表
            </Link>
            <button className={styles['btn']} onClick={handleLogout}>
              退出
            </button>
          </Fragment>
        ) : (
            <button className={styles['btn']} onClick={handleLogin}>
              登录
          </button>
          )}
      </div>
    )
  }
}
const mapStateToProps = state => ({
  isLogin: state.header.isLogin
})

const mapDispatchToProps = dispatch => ({
  handleLogin() {
    dispatch(actions.login())
  },
  handleLogout() {
    dispatch(actions.logout())
  }
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyle(Header, styles))
